<div class="portlet light bordered order-list-container" style="margin: 15px;">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold"> Item Property List </span>
        </div>
        <div class="actions">
            <a ui-sref="fd.item.itemProperty.add" style="line-height: 35px;"  permission-check="{{'item::itemProperty_write'}}"
             ><b>Add Property</b></a>
        </div>
    </div>
    <div class="portlet-body form form-horizontal">
        <div class="row form-group">
            <div class="col-md-6">
                <input type="text" ng-model="itemProperty.nameRegex" ng-keyup="search()"
                       class="form-control" placeholder="Type to search"/>
            </div>
        </div>
        <div ng-show="!searchItempPropertyCompleted" class="text-center">
            <img src="assets/img/loading-spinner-grey.gif"><span>&nbsp;LOADING...</span>
        </div>
        <div ng-show="searchItempPropertyCompleted" class="dataTables_wrapper no-footer" style="margin-top:20px;">
            <div class="table-scrollable">
                <table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" id="sample_1"
            role="grid" aria-describedby="sample_1_info">
            <thead>
                <tr role="row">
                    <th> Name</th>
                    <th> Type </th>
                    <th> UOM/Option </th>
                    <th> Status </th>
                    <th permission-check="{{'item::itemProperty_write'}}"> Actions </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="iprop in itemPropertiesView track by $index">
                    <td>{{iprop.name}}</td>
                    <td>{{iprop.type}}</td>
                    <td><label ng-show="iprop.unitType">{{iprop.unitType}}</label>
                        <label ng-show="iprop.options.length > 0">{{iprop.options}}</label>
                    </td>
                    <td>
                        <div class="caption entry-status" style="padding-top:8px; padding-left: 20px;">
                        <span class="label" ng-class="{
                        'label-default': propertyIsUsedMap[iprop.id],
                        'label-info': !propertyIsUsedMap[iprop.id]
                        }">
                            <span ng-show="propertyIsUsedMap[iprop.id]">Used</span>
                            <span ng-show="!propertyIsUsedMap[iprop.id]">New</span>
                        </span>
                        </div>
                    </td>
                    <td permission-check="{{'item::itemProperty_write'}}">
                        <div ng-show="!propertyIsUsedMap[iprop.id]">
                            <a ui-sref="fd.item.itemProperty.edit({itemPropertyId:iprop.id})">Edit</a> | <a href="#" ng-click="removeItemProperty($index)">Delete</a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
                <pager total-count="itemProperties.length" page-size="pageSize"  load-content="loadContent(currentPage)"></pager>
            </div>
        </div>
    </div>
</div>